<template>
	<div class="aside-right">
		<ul class="aside-list">
			<li>
				<div class="aside-block">
					<svg class="icon" viewBox="0 0 1024 1024" version="1.1" width="24" height="24">
						<path
							d="M512 64c211.2 0 384 153.6 384 345.6V704c0 134.4-102.4 243.2-236.8 256H563.2c-25.6 0-51.2-25.6-51.2-51.2s25.6-51.2 51.2-51.2h89.6c19.2 0 38.4 12.8 51.2 32 57.6-19.2 102.4-64 121.6-121.6H704c-38.4 0-64-25.6-64-64V512c0-38.4 25.6-64 64-64h128v-38.4C832 262.4 704 128 512 128S192 262.4 192 409.6V448h128c38.4 0 64 25.6 64 64v192c0 38.4-25.6 64-64 64H192c-38.4 0-64-25.6-64-64V409.6C128 217.6 300.8 64 512 64z m320 448h-128v192h128V512zM320 512H192v192h128V512z"
							p-id="2258"></path>
					</svg>
					<div>联系客服</div>
				</div>
				<div class="ke-content">
					<div class="ke-box">
						<div class="qrCode" :style="{ backgroundImage: `url(${code})` }"></div>
						<!-- <img src="@/assets/img/code.png" alt="" class="ke-img" /> -->
						<div class="ke-info">
							<h4>扫码联系客服</h4>
							<p>了解更多优惠活动<br>享受一对一专属服务</p>
						</div>
					</div>
				</div>
			</li>
			<li v-if="isTop">
				<div class="aside-block" @click="backTop">
					<svg class="icon" viewBox="0 0 1024 1024" version="1.1" width="24" height="24">
						<path
							d="M0 512c0-70.4 12.8-134.4 38.4-198.4 25.6-64 64-115.2 108.8-160C198.4 102.4 249.6 64 313.6 38.4 377.6 12.8 441.6 0 512 0s134.4 12.8 198.4 38.4c64 25.6 115.2 64 160 108.8s83.2 102.4 108.8 160c25.6 64 38.4 128 38.4 198.4s-12.8 134.4-38.4 198.4c-25.6 64-64 115.2-108.8 160s-102.4 83.2-160 108.8c-64 25.6-128 38.4-198.4 38.4s-134.4-12.8-198.4-38.4c-64-25.6-115.2-64-160-108.8S70.4 761.6 44.8 704C12.8 646.4 0 582.4 0 512z m966.4 0C966.4 262.4 761.6 57.6 512 57.6 262.4 57.6 57.6 262.4 57.6 512c0 249.6 204.8 454.4 454.4 454.4 249.6 0 454.4-204.8 454.4-454.4z"
							p-id="6591"></path>
						<path
							d="M755.2 563.2L531.2 332.8c-6.4-6.4-12.8-6.4-19.2-6.4-6.4 0-12.8 0-19.2 6.4L275.2 563.2c-12.8 12.8-19.2 38.4-6.4 51.2 6.4 6.4 12.8 12.8 19.2 12.8 6.4 0 12.8 0 19.2-6.4L512 409.6l204.8 211.2c6.4 6.4 12.8 6.4 19.2 6.4 6.4 0 19.2-6.4 19.2-12.8 12.8-12.8 6.4-38.4 0-51.2z"
							p-id="6592"></path>
					</svg>
					<div>返回顶部</div>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	import {
		getBottom
	} from "@/api/data";
	export default {
		name: "FixedWindow",
		data() {
			return {
				code: "",
        isTop: false
			};
		},
		created() {
			this.getBottom();
		},
		methods: {
      changeTop(res) {
        this.isTop = res
      },
			async getBottom() {
				const {
					code,
					data
				} = await getBottom();
				if (code == 200) {
					this.code = data.serviceQrcodeAddress;
				}
			},
			backTop() {
				this.$emit('top')
			}
		},
	};
</script>
<style lang="scss" scoped>
	.aside-right {
		position: fixed;
		right: 30px;
		z-index: 99;
		bottom: 160px;
	}

	.aside-list li {
		position: relative;
		cursor: pointer;
	}

	.ke-content {
		position: absolute;
		right: 100%;
		top: 0;
		display: none;
	}

	.ke-box {
		margin-right: 5px;
		border: 1px solid #D3D3D3;
		background-color: #fff;
		display: flex;
		align-items: center;
		width: 260px;
		padding: 10px;

		.qrCode {
			@include size(106px);

			background-color: #fff;
			// margin-bottom: 10px;
			@include bg-setting("qrcode", cover, center);
		}
	}

	.ke-img {
		width: 100px;
		height: 100px;
	}

	.ke-info {
		margin-left: 10px;
	}

	.ke-info h4 {
		font-size: 16px;
	}

	.ke-info p {
		font-size: 13px;
		margin-top: 10px;
	}

	.aside-list li:hover .ke-content {
		display: block;
	}

	.aside-block {
		width: 60px;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 60px;
		background-color: #fff;
		font-size: 12px;
	}

	.aside-block svg {
		margin-bottom: 4px;
	}

	.aside-list li:hover .aside-block {
		background-color: #F68A0C;
		color: #fff;
	}

	.aside-list li:hover .aside-block svg * {
		fill: #fff;
	}

	.window {
		position: fixed;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		padding: 15px 10px;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 2px 2px 5px #333;
		z-index: 99;
		margin-right: -126px;
		transition: margin 0.3s;
		user-select: none;

		.qrCode {
			@include size(106px);

			background-color: #fff;
			margin-bottom: 10px;
			@include bg-setting("qrcode", cover, center);
		}

		.container {
			position: relative;
			width: 20px;
			height: 20px;
		}

		.chevron {
			position: absolute;
			top: 5px;
			left: -2px;
			font-size: 16px;
			animation: move-left 0.8s ease-out infinite;

			&::before,
			&::after {
				border: 6px solid transparent;
				border-right: 6px solid #fff;
				width: 0;
				height: 0;
				position: absolute;
				top: 0;
				content: " ";
			}

			&::before {
				border-right-color: #f9521f;
				right: -10px;
			}
		}

		.chevron.show {
			animation: move 0.8s ease-out infinite;

			&::before,
			&::after {
				border: 6px solid transparent;
				border-left: 6px solid #fff;
				width: 0;
				height: 0;
				position: absolute;
				top: 0;
				right: -10px;
				content: " ";
			}

			&::before {
				border-left-color: #f9521f;
				right: -12px;
			}
		}

		@keyframes move {
			0% {
				transform: translateX(0);
			}

			100% {
				opacity: 0;
				transform: translateX(15px);
			}
		}

		@keyframes move-left {
			0% {
				opacity: 1;
				transform: translateX(15px);
			}

			100% {
				opacity: 0;
				transform: translateX(-5px);
			}
		}
	}

	.window.to {
		margin-right: 0;
	}
</style>
